別人的作品：香料們

grid 的好處之一：可以少寫很多、很多、很多 media query。

from: http://labs.jensimmons.com/examples/spices-1.html

1. 視窗寬度 < 100px 時

   • 一列一張圖
   • 圖片大小為 100%

2. 視窗寬度 > 100px 時

   • 圖片寬度最小為 100px，一列放儘量多的圖片
     ( 螢幕寬 199px 時，顯示一張圖；螢幕寬 200px 時，顯示兩張圖 ... )

   • 圖片平均佔滿一列的寬度

     換句話說...
     * 一列 N 張圖 ( N = `Math.floor(螢幕寬 / 100px)` )
     * 圖片大小為 `螢幕寬 / N`
     

目前的 html 結構為：

<main>
    <figure><img src="圖片網址"></figure>
    <figure><img src="圖片網址"></figure>
    <figure><img src="圖片網址"></figure>
    <figure><img src="圖片網址"></figure>
    <figure><img src="圖片網址"></figure>
    <figure><img src="圖片網址"></figure>
    <figure><img src="圖片網址"></figure>
</main>

用 float 可以寫很多 @media query 來完成差不多的效果

https://jsfiddle.net/lazy_shyu/0enc33kc/3/

figure {
    float: left;
    width: 100%;

    // 這邊是寫到 10 而已，不能無限 Orz
    @for $n from 2 through 10 {
        @media (min-width: #{$n * 100px}) { width: (100% / $n); }
    }
}

但使用 grid 的話，我們可以這樣寫：

https://jsfiddle.net/lazy_shyu/0enc33kc/4/

main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

一切就完成了~!!!!
程式碼簡潔，而且一行要多長就多長 ( 本來是只寫道 10 )，所有複雜的計算他都幫我們算好了 <3

auto-fit 會根據後面算出來的 track size，來自己算出應該要多少個 track

另外 minmax() 很好用~!! 但它的支援度也十分淒慘 Orz
使用方法詳見：https://developer.mozilla.org/en-US/docs/Web/CSS/minmax
這邊 minmax(150px, 1fr) 的意思就是：

1. 最小 150px，一排放儘量多個 grid item
2. 最大 1fr，所有 cell 平分 grid container 的寬度 ( 或高度 )

練習切版

看到了一的很適合用 grid 的版面 ( 圖片網址 )

大概切了後是這樣的：https://jsfiddle.net/732v1mdg/2/

html 跟 css 寫起來都不太複雜，
但這時候就會發現，不能直接在 container 上定義樣式有點討厭，導致我們需要多加很多不需要的 grid item。